<template>
    <section>
        <el-row :gutter="20">
            <el-col :span="4">
                <el-input
                        v-permission="installPermissions.permissions.cooperative.list"
                        placeholder="请输入搜索关键词"
                        v-model="searchParams.key"
                        prefix-icon="fa fa-search"
                >
                    <div slot="append">
                        <el-button
                                type="primary"
                                icon="fa fa-search"
                                @click=" pager.pager.pageNumber = 1 ;doSearch()"
                        />
                    </div>
                </el-input>
            </el-col>
            <el-col
                    :span="4"
                    :offset="12"
            >
                <el-button
                        v-permission="installPermissions.permissions.cooperative.add"
                        type="primary"
                        size="small"
                        @click="handleEdit({id:0})"
                        icon="el-icon-plus"
                >
                    添加合作社
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-upload
                        :show-file-list="false"
                        :on-success="notify"
                        :headers="headers"
                        :before-upload="checkFile"
                        :on-error="uploadError"
                        :action="importUrl"
                >
                    <el-button
                            v-permission="installPermissions.permissions.cooperative.import"
                            size="small"
                            type="primary"
                            icon="el-icon-upload2"
                    >
                        导入合作社及成员
                    </el-button>
                </el-upload>
            </el-col>
        </el-row>
        <egrid
                class="egrid"
                stripe
                border
                @row-dblclick="goDetail"
                :data="pager.dataList"
                :columns="columns"
        />
        <el-row>
            <el-col
                    :span="6"
                    :offset="18"
            >
                <el-pagination
                        style="float:right"
                        layout="prev, pager, next"
                        :total="pager.pager.recordCount"
                        :page-size="pager.pager.pageSize"
                        :current-page.sync="pager.pager.pageNumber"
                        v-show="pager.pager.pageCount != 0"
                        @current-change="changePage"
                />
            </el-col>
        </el-row>

        <!-- 添加和编辑弹出框 -->
        <AddAndEdit
                v-model="addAndEditValue"
                @on-show-change="addAndEditDone"
        />
        <File v-model="fileValue"
              @on-show-change="fileDone"/>
    </section>
</template>
<style>
</style>
<script>
    import AddAndEdit from "./AddAndEdit";
    import Ops from "./ops.vue";
    import File from "./file";

    export default {
        components: {
            AddAndEdit: AddAndEdit,
            File: File
        },
        data() {
            return {
                headers: {
                    Authorization: ""
                },
                importUrl: this.$config.http.prefix + "/cooperative/import",
                searchParams: {
                    organizationIds: [],
                    key: ""
                },
                defaultProps: {
                    children: "sub",
                    value: "id",
                    label: "name"
                },
                organizations: [],
                grantValue: {
                    id: 0,
                    show: false
                },
                resetValue: {
                    id: 0,
                    show: false
                },
                fileValue: {
                    show: false,
                    cooperative: {id: 0}
                },
                addAndEditValue: {
                    show: false,
                    cooperative: {id: 0}
                },
                memberValue: {
                    show: false,
                    cooperativeId: 0
                },
                powerInfo: {
                    selectedIds: [],
                    userId: 0
                },
                powerShow: false,
                permissions: [],
                columns: [
                    {label: "ID", width: "55", align: "center", prop: "id"},
                    {
                        label: "名称",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "name"
                    },
                    {
                        label: "社会信用编码",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "creditCode"
                    },
                    {
                        label: "注册号",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "registerNo"
                    },
                    {
                        label: "注册地址",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "registerAddress"
                    },
                    {
                        label: "成立日期",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "establishmentDate"
                    },
                    {
                        label: "注册资金(万元)",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "registerCapital"
                    },
                    {
                        label: "等级",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "rankName",
                        propsHandler: function ({row, col, column}) {
                            row.rankName = row.rank ? row.rank.name : '';
                            return {row, col, column};
                        }
                    },
                    // {
                    //     label: "社员数(人)",
                    //     "show-overflow-tooltip": true,
                    //     align: "center",
                    //     prop: "peopleNum"
                    // },
                    // {
                    //     label: "果园面积(亩)",
                    //     "show-overflow-tooltip": true,
                    //     align: "center",
                    //     prop: "orchardAcreage"
                    // },
                    {
                        label: "操作",
                        align: "center",
                        component: Ops,
                        listeners: {
                            deleteDone: this.loadData,
                            editRow: this.handleEdit,
                            fileRow: this.handleFile
                        }
                    }
                ],
                applications: [],
                pager: {
                    dataList: [],
                    pager: {
                        pageCount: 0,
                        pageNumber: 1,
                        pageSize: 15,
                        recordCount: 0
                    },
                    paras: {
                        key: ""
                    }
                }
            };
        },
        methods: {

            uploadError(err, file, fileList) {
                console.log(err, file, fileList);
                this.$message.error("导入失败!");
            },
            notify(res, file) {
                console.log(res, file);
                this.$message.success("文件上传成功,正在进行导入,请稍后刷新页面!");
            },
            checkFile(file) {
                var suffix = file.name.substr(file.name.lastIndexOf("."));
                const isZip = ".zip" == suffix;
                // TODO 待加 大小限制
                if (!isZip) {
                    this.$message.error("只能导入 zip文件!");
                }
                return isZip;
            },
            doSearch() {
                window.setTimeout(() => {
                    this.$api.cooperative.search(
                        this.searchParams.key,
                        this.pager.pager.pageNumber,
                        result => {
                            this.pager = result.pager;
                        }
                    );
                }, 100);
            },
            changePage() {
                // if (this.searchParams.organizationId || this.searchParams.key) {
                if (this.searchParams.key) {
                    this.doSearch();
                } else {
                    this.loadData();
                }
            },
            handleEdit(row) {
                this.addAndEditValue = {show: true, cooperative: this.$clone(row)};
            },
            handleFile(row) {
                this.fileValue = {show: true, cooperative: this.$clone(row)};
            },
            addAndEditDone(data) {
                this.addAndEditValue.show = data.visible;
                this.changePage();
            },
            fileDone(data) {
                this.fileValue.show = data.visible;
                this.changePage();
            },
            loadData() {
                this.$api.cooperative.list(this.pager.pager.pageNumber, result => {
                    console.log(result.pager);
                    this.pager = result.pager;
                });
            },
            loadTree() {
                // this.$api.organization.tree(0, false, result => {
                //   this.organizations = result.tree || [];
                // });
            },
            loadApplications() {
                this.$api.application.all(result => {
                    this.applications = result.applications;
                });
            },
            goDetail(row) {
                this.$router.push({path: "/cooperative/detail", query: {id: row.id}})
            }
        },
        created() {
            this.loadData();
            // this.loadTree();
            // this.loadApplications();
        },
        watch: {
            searchParams: {
                handler() {
                    if (this.searchParams.organizationIds) {
                        this.searchParams.organizationId = this.searchParams.organizationIds[
                        this.searchParams.organizationIds.length - 1
                            ];
                    } else {
                        this.searchParams.organizationId = null;
                    }
                },
                immediate: true,
                deep: true
            }
        }
    };
</script>
